<template>
    <div class="notice-list">
        <common-list @resert="resert" ref="commonListRef">
            <template #operate="{ scope }">
                <el-button link type="primary" size="small" @click="handler(2, scope.scope.row)" v-if="scope.scope.row.state === 1 && mStore.btns.find((item) => item.name === '审核')">审核</el-button>
                <el-button link type="primary" size="small" @click="handler(4, scope.scope.row)" v-else-if="scope.scope.row.state === 4 && mStore.btns.find((item) => item.name === '处理')"
                    >处理</el-button
                >
                <el-button link type="primary" size="small" @click="handler(5, scope.scope.row)" v-else-if="scope.scope.row.state === 3 && mStore.btns.find((item) => item.name === '派发')"
                    >派发</el-button
                >
                <el-button link type="primary" size="small" @click="handler(6, scope.scope.row)" v-else-if="scope.scope.row.state === 5 && mStore.btns.find((item) => item.name === '验收')"
                    >验收</el-button
                >
                <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handler(3, scope.scope.row)"
                    v-if="mStore.btns.find((item) => item.name === '查看') && (scope.scope.row.state === 2 || scope.scope.row.state === 6 || scope.scope.row.state === 7)"
                    >查看</el-button
                >
            </template>
            <template #status="{ scope }">
                <div class="state" :style="{ color: stateName[scope.scope.row.state - 1]?.fontColor, background: stateName[scope.scope.row.state - 1]?.bgColor }">
                    {{ scope.scope.row.stateName }}
                </div>
            </template>
            <template #btns>
                <div class="btns">
                    <el-button type="primary" @click="reportAddHandler" class="add-btn" v-if="mStore.btns.find((item) => item.name === '新增报修')">新增报修</el-button>
                    <w-button @click="goDelay" class="config-btn" v-if="mStore.btns.find((item) => item.name === '拖期配置')">拖期配置</w-button>
                </div>
            </template>
        </common-list>
        <w-popup :isShowPopup="isShowPopup" @close="popupClose(popFormData)" @confrim="confrim" title="新增报修" :loading="popLoading" confrimText="下一步">
            <w-form :formConfig="popupConfig" :formData="popFormData" :rules="popupRules" ref="wFormRef"></w-form>
        </w-popup>
    </div>
</template>

<script setup>
import { provide, reactive, ref, watch } from "vue";
import { tableConfig, formConfig, popupFormSetConfig, popupRules, popupFormGetConfig } from "./config";
import { getReportList, getReportDist, getStrategyId } from "@/service/api/report.js";
import { getAreaPosition, getAreaDevice, getDpt } from "@/service/api/maintenance.js";
import { useTableOperate } from "@/hooks/useTable.js";
import { mainStore } from "@/store/main.js";
import wButton from "@/components/wButton.vue";
import wPopup from "@/components/wPopup.vue";
import { useRouter } from "vue-router";
import { useReportOrderDetail } from "@/store/reportOrderDetail.js";

const mStore = mainStore();
const store = useReportOrderDetail();
const commonListRef = ref(null);
const wFormRef = ref(null);
const formData = reactive({ areaLocation: "", equipmentObject: "", soursce: "", responsibleDepartment: "", state: "", major: "", type: "", equipmentId: "" });
const popFormData = reactive({ areaId: "", jobOrderNo: "", jobOrderLevel: "" });
const { popupClose, popLoading, isShowPopup, popupConfig, addHandler } = useTableOperate({}, { popupFormSetConfig, popupFormGetConfig });

const reportAddHandler = () => {
    addHandler();
};
const router = useRouter();
const stateName = [
    { fontColor: "#FFC53F", bgColor: "rgba(255,197,63,0.2)", index: 1 },
    { fontColor: "#8C8C8C", bgColor: "#EBEBEB", index: 2 },
    { fontColor: "#FF4D4F", bgColor: "rgba(255,77,79,0.2)", index: 3 },
    { fontColor: "#FA6400", bgColor: "rgba(250,173,20,0.2)", index: 4 },
    { fontColor: "#00428E", bgColor: "rgba(0,66,142,0.2)", index: 5 },
    { fontColor: "#A0D911", bgColor: "rgba(160,217,17,0.2)", index: 6 },
    { fontColor: "#8C8C8C", bgColor: "#EBEBEB", index: 7 }
];
const api1 = [
    { api: getAreaPosition, index: 0 },
    { api: getReportDist, index: 2, name: "Repair_Order_Level" },
    { api: getDpt, index: 4 },
    { api: getReportDist, index: 5, name: "Repair_Status" },
    { api: getReportDist, index: 6, name: "Basics_Structure_Type" },
    { api: getReportDist, index: 3, name: "Repair_Order_Soursce" }
];
const api2 = [
    { api: getAreaPosition, index: 0 },
    { api: getReportDist, index: 2, name: "Repair_Order_Level" }
];
getApiData(api1, formConfig.value);
getApiData(api2, popupFormSetConfig);
function getApiData(apiArray, config) {
    apiArray.forEach((item) => {
        item.api({ parentCode: item.name }).then((res) => {
            if (res.code === 200) {
                config[item.index].options = res.data.map((item) => ({ label: item.name, value: item.value }));
            }
        });
    });
}
watch(
    () => formData.areaLocation,
    (newVal) => {
        if (!newVal) return;
        formData.jobOrderNo = "";
        formConfig.value[1].options = [];
        getAreaDevice({ areaLocation: newVal }).then((res) => {
            if (res.code === 200) {
                formConfig.value[1].options = res.data.map((item) => ({ label: item.equipmentObject, value: item.equipmentId }));
            }
        });
    }
);
watch(
    () => popFormData.areaId,
    (newVal) => {
        if (!newVal) return;
        popFormData.jobOrderNo = "";
        popupFormSetConfig[1].options = [];
        getAreaDevice({ areaLocation: newVal }).then((res) => {
            if (res.code === 200) {
                popupFormSetConfig[1].options = res.data.map((item) => ({ label: item.equipmentObject, value: item.equipmentId }));
            }
        });
    }
);
const confrim = () => {
    wFormRef.value.ruleFormRef.validate((isValid) => {
        if (isValid) {
            store.stateOperation = 1;
            getStrategyId(popFormData.jobOrderNo).then((res) => {
                mStore.tableData = {};
                mStore.tableData = {
                    areaText: popupFormSetConfig[0].options.find((item) => item.value === popFormData.areaId).label,
                    areaNameId: popFormData.areaId,
                    jobOrderLevelText: popupFormSetConfig[2].options.find((item) => item.value === popFormData.jobOrderLevel).label,
                    jobOrderLevel: popFormData.jobOrderLevel,
                    deviceName: popupFormSetConfig[1].options.find((item) => item.value === popFormData.jobOrderNo).label,
                    deviceInfoId: popFormData.jobOrderNo,
                    strategyId: res.data.strategyId,
                    repairPersonName: mStore.userInfo.showName
                };
                store.getDeviceTree({ id: Number(popFormData.areaId), strategyId: res.data.strategyId, structureType: 1 });
                router.push("/main/reportManage/reportOrderDetail");
            });
        }
    });
};
const handler = (index, data) => {
    console.log(data);
    mStore.tableData = data;
    store.stateOperation = index;
    router.push("/main/reportManage/reportOrderDetail");
};
const resert = () => {
    Object.keys(formData).forEach((key) => (formData[key] = ""));
};
const goDelay = () => {
    router.push("/main/reportManage/delay");
};
provide("formData", formData);
provide("formConfig", formConfig);
provide("tableConfig", tableConfig);
provide("apiFn", getReportList);
provide("title", "报修明细");
</script>

<style lang="less" scoped>
.notice-list {
    height: 100%;
    .state {
        width: 40px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
    }

    .btns {
        display: flex;
        .add-btn,
        .config-btn {
            width: 106px;
            height: 32px;
        }
    }
}
</style>
